<script setup>
import { ref, watch, nextTick, computed } from 'vue'
import { gameStateStore, boardOpenOrCloseStore } from '@/stores'
const isStart = ref(true)
const gameStateStore1 = gameStateStore()
const boardOpenOrCloseStore1 = boardOpenOrCloseStore()
const handleClickStartFn = async () => {
  gameStateStore1.changeStopMusicModelChange(true)
  gameStateStore1.changeState()

  console.log('1' + gameStateStore1.gameState)
  await nextTick(() => {
    if (gameStateStore1.gameState) {
      //首次点击开始才会触发321的倒数组件
      boardOpenOrCloseStore1.changeCountDownBoard(true)
      setTimeout(() => {
        //当前正在游戏中，正在倒计时
        gameStateStore1.changeCountDownState(gameStateStore1.countDown + 1)
      }, 4000)
    } else {
      //要把倒计时暂停,第一次为false，然后在游戏状态时暂停一次变为1，再暂停变为2----，直到正常为o时，会变回false
      gameStateStore1.changePaused(gameStateStore1.isPaused + 1)
    }
  })
}
watch(
  () => gameStateStore1?.gameState,
  (newV) => {
    if (newV) {
      //游戏是开始状态时，要显示“暂停”
      isStart.value = false
    } else {
      isStart.value = true
    }
  },
)
const handleClickOpenSpeedBoard = () => {
  boardOpenOrCloseStore1.changeSpeedBoard(true)
}
const handleClickReGame = () => {
  boardOpenOrCloseStore1.changeReGame(true)
  //暂停状态
  handleClickStartFn()
}
const speedMessage = computed(() => {
  return gameStateStore1.speed === 1 ? '困难' : '简单'
})
</script>
<template>
  <div class="content-border">
    <div
      class="content-left"
      v-if="!gameStateStore1.stopMusicModelChange"
      @click="handleClickOpenSpeedBoard"
    >
      <div>
        {{ speedMessage }}模式
        <div style="padding-top: 30px">更改</div>
      </div>
    </div>
    <div
      class="content-left"
      v-if="gameStateStore1.stopMusicModelChange"
      style="height: 110px"
      @click="handleClickReGame"
    >
      <div>重玩</div>
    </div>
    <div class="content-right" @click="handleClickStartFn">
      <div v-if="isStart">开始</div>
      <div v-else>暂停</div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.content-border {
  .content-left,
  .content-right {
    position: fixed;
    left: 0;
    bottom: 20vh;
    height: 270px;
    width: 70px;
    padding: 20px;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 0 10px #7e4f23;
    background-color: rgb(155, 108, 39);
    cursor: pointer;
    > div {
      &:hover {
        color: rgb(236, 234, 234);
      }
    }
  }
  .content-right {
    left: initial;
    bottom: 30vh;
    right: 0;
    height: 110px;
  }
}
</style>
